<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.dict" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.brand" @change="getCompanyInfo" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">保险类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.insuranceType" placeholder="请选择品牌" clearable>
					<el-option label="新保" value="sb">
					</el-option>
					<el-option label="续保" value="xb">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1">
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.time" size="small" style="width:90%" type="month" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
			<el-col :span="2">
				<el-button size="small" type="primary" @click="query">查询</el-button>
			</el-col>
			<el-col :span="17" style="margin-left: -10px; text-align: right;">
				<el-button size="small" type="primary" @click="processOut" v-loading.fullscreen.lock="fullscreenLoading" v-if="btnGroup.export">导出</el-button>
			</el-col>
		</el-row>
		<el-row>
			<div class="report_Fixedwidth">
				<table class="report_table" id="monthPriceAllot" cellspacing="0" :width="tableWidth" cellpadding="0">
					<tbody>
						<tr class="texttbody" height="60px;">
							<th scope="col" style="width: 80px;" rowspan="3">品牌</th>
							<th scope="col" style="width: 80px;" rowspan="3">区域</th>
							<th scope="col" style="width: 200px;" rowspan="3">4S店</th>
							<th scope="col" :colspan="colspanNum">当月</th>
						</tr>
						<tr class="texttbody" height="60px;">
							<template v-for="monthitem in companyAll">
								<th scope="col" colspan="10">{{monthitem.insuranceCompanyName}}</th>
							</template>
						</tr>
						<tr class="texttbody" height="60px;">
							<template v-for="monthitem in companyAll">
								<th scope="col" style="width: 80px;">总个数</th>
								<th scope="col" style="width: 80px;">总保费</th>
								<th scope="col" style="width: 80px;">总车船税</th>
								<th scope="col" style="width: 100px;">单交强个数</th>
								<th scope="col" style="width: 100px;">单交强保费</th>
								<th scope="col" style="width: 100px;">单交强车船税</th>
								<th scope="col" style="width: 90px;">追加个数</th>
								<th scope="col" style="width: 90px;">追加保费</th>
								<th scope="col" style="width: 90px;">退保个数</th>
								<th scope="col" style="width: 90px;">退保保费</th>
							</template>
						</tr>
						<tr v-for="tableitem in tableData.dataList">
							<td>{{tableitem.brandName}}</td>
							<td>{{tableitem.disp}}</td>
							<td>{{tableitem.oName}}</td>
							<template v-for="monthitem in companyAll">
								<td>{{tableitem[monthitem.monthAmount]}}</td>
								<td>{{tableitem[monthitem.monthpriceNVVPrice]}}</td>
								<td>{{tableitem[monthitem.monthvvulptPrice]}}</td>
								<td>{{tableitem[monthitem.monthJqAmount]}}</td>
								<td>{{tableitem[monthitem.monthJqPrice]}}</td>
								<td>{{tableitem[monthitem.monthdJVVUqPrice]}}</td>
								<td>{{tableitem[monthitem.mountAddAmount]}}</td>
								<td>{{tableitem[monthitem.mountAddPrice]}}</td>
								<td>{{tableitem[monthitem.mountBackAmount]}}</td>
								<td>{{tableitem[monthitem.mountBackPrice]}}</td>
							</template>
						</tr>
					</tbody>
				</table>
			</div>
			<!--<el-table :data="tableData.dataList" border>
				<el-table-column label="品牌" prop="brandName" width="120"></el-table-column>
				<el-table-column label="区域" prop="disp" width="120"></el-table-column>
				<el-table-column label="4S店" prop="oName" width="150"></el-table-column>
					<el-table-column label="当月">
						<template v-for="item in companyAll">
							<el-table-column :label="item.insuranceCompanyName">
								<el-table-column label="个数" :prop="item.monthAmount" width="100"></el-table-column>
								<el-table-column label="保费" :prop="item.monthPrice" width="120"></el-table-column>
								<el-table-column label="单交强个数" :prop="item.monthJqAmount" width="120"></el-table-column>
								<el-table-column label="单交强保费" :prop="item.monthJqPrice" width="120"></el-table-column>
							</el-table-column>
						</template>
					</el-table-column>
					<el-table-column label="合计">
						<el-table-column label="小计">
							<el-table-column label="个数" prop="month_amount" width="100"></el-table-column>
							<el-table-column label="保费" prop="month_price" width="120"></el-table-column>
							<el-table-column label="单交强个数" prop="month_jqAmount" width="120"></el-table-column>
							<el-table-column label="单交强保费" prop="month_jqPrice" width="120"></el-table-column>
						</el-table-column>
					</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>-->
		</el-row>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	</div>
</template>

<script>
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//表格数据导出
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "保险月报表保费分配.xls",
				//表格宽度
				tableWidth:"",
				//当月合并单元格数
				colspanNum:'',
				//查询条件
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				fullscreenLoading: false,
				CurentPage: 1,
				page: this.page,
				//区域
				regionCombo: [],
				//时间
				//4S店
				storeCombo: [],
				//品牌
				brandCombo: [],
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				//全部保险公司
				companyAll: [],
				//查询条件
				mapData: {
					dict: '',
					time: new Date(),
					companyId: '',
					brand: '',
					insuranceType: 'sb',
				},
				btnGroup:{},
			}
		},
		methods: {
			//导出 
			processOut: function() {
				debugger;
				this.$data.tableId = "monthPriceAllot";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//导出回调函数
			backFunction: function() {
				this.$data.tableId = "";
			},
			//周报表保费分配导出
			monthPriceOut: function() {
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				}else{
					this.$data.mapData.time = '';
				}
				this.$data.fullscreenLoading = true;
				this.$http.post(this.API_ROOT + '/insurance/statstics/month/indurance/exp/excel', this.$data.mapData, {
						params: {}
					})
					.then(resp => {
						this.$data.fullscreenLoading = false;
						if(resp.data.success) {

							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=保险月报表保费分配-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});
			},
			handleSizeChange: function() {

			},
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			query: function() {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM");
				}
				if(this.$data.mapData.companyId == ""){
					this.$message.error("请选择公司！");
				}else{
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/insurance/statstics/month/indurance/page', //url
					body: this.$data.mapData,
					params: { //发送的参数
						start: this.$data.CurentPage,
						limit: this.page.pageSize,
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;

				}, function(error) {
					// error
				})
				}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.mapData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.mapData.dict,
						brand: this.$data.mapData.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.mapData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {
					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				//获取功品牌下拉
			this.$http.get(this.API_ROOT + '/rbac/dept/brand/all', {}).then((response) => {
				this.$data.brandCombo = response.data.dataList;
			}, (response) => {});
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			//获取保险公司
			this.$http.get(this.API_ROOT + '/insurance/companys', {
				params: {}
			}).then((response) => {
				debugger;
				this.$data.companyAll = response.data.data;
				//表格宽度
				this.$data.tableWidth = 360 + 900 * (this.$data.companyAll.length) + "px";
				//当周当月合并单元格数
				this.$data.colspanNum = this.$data.companyAll.length * 10;
			}, (response) => {
				debugger;
			});
			
        
        //获取按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "bx/monthAllot", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;

				var temp = {};

				for(var i = 0; i < btnData.length; i++) {

					var btnName = btnData[i].btnName;

					temp[btnName] = btnName;

				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			});
		},
		components: {
			exports
		}
	}
</script>

<style>

</style>